<%--
  Created by IntelliJ IDEA.
  User: 杨飞龙
  Date: 2020/5/31
  Time: 16:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML>
<html>
<head>
    <!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
    <base href="<%=basePath%>">

    <link rel="stylesheet" type="text/css" href="lib/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="lib/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="lib/z-tree/css/zTreeStyle/zTreeStyle.css">


    <%--js--%>
    <script type="text/javascript" src="lib/easyui/jquery.min.js">
    </script>
    <script type="text/javascript" src="lib/easyui/jquery.easyui.min.js">
    </script>
    <script type="text/javascript" src="lib/z-tree/js/jquery.ztree.all.js"></script>
    <script type="text/javascript" src="lib/easyui/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="lib/jquery.serializejson/jquery.serializejson.min.js"></script>
</head>
<body >

<%--添加菜单弹框--%>
<div id="addMenuWindow" class="easyui-window" title="添加菜单" style="width:500px;height:400px"
     data-options="modal:true,closed:true">

    <form id="menuForm" method="post">
        <input id="mid" type="hidden" name="mid">
        <input id="pid" type="hidden" name="pid">
        <div style="padding: 30px 50px">
            <input required class="easyui-textbox" prompt="请输入菜单名称："
                   data-options="missingMessage:'菜单名称不能为空',label:'菜单名称：'"
                   style="width:100%;height:30px;padding:10px" name="mname" >
        </div>
        <div style="padding: 30px 50px">
            <input  class="easyui-textbox" prompt="请输入url地址："
                   data-options="label:'url：'"
                   style="width:100%;height:30px;padding:10px" name="url" >
        </div>
        <div style="padding: 30px 50px">
            <input class="easyui-textbox" prompt="请输入菜单描述："
                   data-options="label:'菜单描述：'"
                   style="width:100%;height:30px;padding:10px" name="mdesc" >
        </div>


        <div style="padding: 15px 50px;text-align: center">
            <a onclick="insertMenu()" href="javascript:void(0)" class="easyui-linkbutton">提交</a>
        </div>

    </form>
</div>

<div class="easyui-layout" style="width: 600px;height: 500px;">
<div data-options="region:'west'" class="easyui-panel" title="操作" style="width:40%;text-align: center">

    <div style="margin: 10px">
        <a id="addMenu"  href="javascript:void(0)" style="width: 80%" class="easyui-linkbutton">添加菜单</a>
    </div>
    <div style="margin: 10px">
        <a id="editMenu"  href="javascript:void(0)" style="width: 80%" class="easyui-linkbutton">编辑菜单</a>
    </div >
    <div style="margin: 10px">
        <a id="delMenu"  href="javascript:void(0)" style="width: 80%" class="easyui-linkbutton">删除菜单</a>
    </div>
    <div style="margin: 10px">
        <a id="reloadMenu"  href="javascript:void(0)"  style="width: 80%" class="easyui-linkbutton">刷新菜单</a>
    </div>

</div>
<div class="easyui-panel" title="当前菜单管理" data-options="region:'center'"
     style="width:30%;padding:5px;background:#eee;">
    <ul id="menutree" class="ztree"></ul>
</div>

</div>
</body>

<%--zTree--%>
<script type="text/javascript">

    var setting = {
        data: {
            simpleData: {
                enable: true,
                idKey: "mid",
                pIdKey: "pid"
            },
            key: {
                name: "mname",
                url: "xxx"
            }
        },
        //异步加载用户菜单
        async: {
            enable: true,
            url: "menu/allList.do" ,
            dataFilter: ajaxDataFilter

        }

    };

    //预处理
    function ajaxDataFilter(treeId, parentNode, responseData) {
        if (responseData) {
            for(var i =0; i < responseData.length; i++) {
                responseData[i].open=true;
            }
        }
        return responseData;
    };

    //获取选择的节点

    $(document).ready(function () {
        $.fn.zTree.init($("#menutree"), setting);
    });

</script>

<script type="text/javascript">
    $('#addMenu').click(function () {
        //清除之前的父id
        $("#pid").val("")

        $("#addMenuWindow").window({
            closed:false
        })
        //获取选中的tree节点
        var treeObj = $.fn.zTree.getZTreeObj("menutree");

        var nodes = treeObj.getSelectedNodes();
        if (nodes.length == 0){
            return false
        }
        //设置表单id
        $("#pid").val(nodes[0].mid)


    })

    function  insertMenu() {
        $('#menuForm').form('submit', {
            url:"menu/saveOrUpdate.do",
            onSubmit: function () {
                var flag = $('#menuForm').form('validate');
                return flag;
            },
            success: function (data) {
                if (data) {
                    $('#addMenuWindow').window({
                        closed: true
                    });
                    //清除表单
                    $("#menuForm").form('reset');
                    //刷新树页面
                    $.fn.zTree.init($("#menutree"), setting);
                    $.messager.alert('添加菜单', '操作菜单成功', 'info')
                }
            }
        });
    }

    /*刷新菜单*/
    $("#reloadMenu").click(function () {
        $.fn.zTree.init($("#menutree"), setting);
    })
    
    /*编辑菜单*/
    $("#editMenu").click(function () {
        $("#addMenuWindow").window({
            closed:false
        })
        //获取选中的tree节点
        var treeObj = $.fn.zTree.getZTreeObj("menutree");

        var nodes = treeObj.getSelectedNodes();
        //回显数据
        $('#menuForm').form('load',nodes[0]);
    })

    /*删除菜单*/
    $("#delMenu").click(function () {
        //获取选中的tree节点
        var treeObj = $.fn.zTree.getZTreeObj("menutree");
        var nodes = treeObj.getSelectedNodes();

        if (nodes.length == 0){
            $.messager.alert("删除菜单","请选择你要删除的菜单","info")
            return false
        }
        $.messager.alert("删除菜单","你确定要删除此菜单","info",function () {
            $.get("menu/delMenu.do?mid="+nodes[0].mid,function (data) {
                if (data){
                    $.fn.zTree.init($("#menutree"), setting);
                    $.messager.alert('删除菜单', '删除成功', 'info')
                }else {
                    $.fn.zTree.init($("#menutree"), setting);
                    $.messager.alert('删除菜单', '删除失败', 'info')
                }
            })
        })
    })

</script>
</html>
